vue
<template>
  <div class="container" v-if="Object.keys(cookerMainMessage.value).length !== 0">
        <div  class="left-column">
      <!-- 左栏内容 -->
      <div class="chef-info">厨师信息</div>
      <div class="head-photo"></div>
      <div class="cook-name" >{{cookerMainMessage.value.userVO.userName}}</div>
      <div class="serv-number">服务次数：{{cookerMainMessage.value.cookerDetailVO.service_number}}次</div>
      <div class="cook-rating">评分：{{cookerMainMessage.value.cookerDetailVO.score}}</div>
      <div class="cook-phone">电话：{{cookerMainMessage.value.userVO.tel}}</div>
      <div class="skill">
        <div style="text-align: center">擅长</div>
        <div v-for="tag in cookerMainMessage.value.userVO.tags" :key="tag" class="tag">{{tag}}</div>
      </div>
            <el-button class="message-button" @click="goToChatPage">发消息</el-button>

    </div>
    <div class="right-column">
      <!-- 右栏内容 -->
      <span>菜单</span>
      <div>
        <el-card class="menu-card" style="display: inline-flex;height: 120px;background-color: #1D815B;color: white"
                 v-for="food in cookerMainMessage.value.cookerDetailVO.foodsInfo" :key="food.foodName" shadow="hover">
            <div >{{ food.foodName }}</div>
            <div>{{ food.price }}元</div>
          <el-input-number v-model="food.num" :min="0" :max="99" class="number-select"></el-input-number>
        </el-card>
        <div>
          <el-button class="order-button" @click="doBuy">去结算</el-button>
          <span class="total-price">总价:<span class="t-price">￥{{ totalPrice }}</span></span>
        </div>

      </div>

      <span>个人展示</span>
      <div class="image-container">
        <img v-for="food in cookerMainMessage.value.cookerDetailVO.foodsInfo" :key="food.picUrl" :src="`${food.picUrl}`" alt="">
      </div>
      <div style="margin-left: 20px; font-size: 24px;margin-bottom: 20px">用户评价</div>
      <el-card class="user-evaluate-card" v-for="i in 25" :key="i">
        <div class="card-top">
          <img src="../assets/user.webp" alt="User Avatar" class="user-photo">
          <div style="margin-left: 10px">
            <div class="user-name">用户{{i}}</div>
            <div class="publish-time">发布时间：{{new Date().toLocaleDateString()}}</div>
          </div>
        </div>
        <div class="card-middle">
          <div class="evaluate-content">用户评价{{i}}</div>
        </div>
        <div class="card-right">
          <img src="../assets/image1.png" alt="Image">
        </div>
      </el-card>
    </div>
  </div>
</template>
<style>
.container {
  display: flex;
  position: relative;
  height: 100%;
  width: 100%;
  overflow: scroll;
}
.left-column {
  flex: 1;
  position: fixed;
  width: 300px;
  /* 其他样式 */
  background-color: #C3F1EB; /* 左栏底色为淡绿色 */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
}
.chef-info {
  position: absolute;
  top: 100px;
  left: 20px;
  font-size: 24px;
}
.head-photo {
    position: absolute;
    top: 220px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-image: url('@/assets/cookHeadPhoto.png');
    background-size: cover;
    background-position: center;
  }
.cook-name{
  position: absolute;
  top: 330px;
  font-size: 32px;
}
.serv-number {
  position: absolute;
  top: 382px;
  font-size: 16px;
}
.cook-rating{
  position: absolute;
  top: 418px;
  font-size: 16px;
}
.cook-phone {
  position: absolute;
  top: 454px;
  font-size: 16px;
}
.skill {
  position: absolute;
  top: 490px;
  font-size: 16px;
}
.skill .tag {
    display: inline-block;
    padding: 4px 8px;
    background-color: #4BBB90;
    color: white;
    margin: 8px;
    font-size: 14px;
    border-radius: 4px;
}
.order-button {
  margin-top: 10px;
  padding: 8px 100px;
  margin-bottom:10px;
  background-color: #3A9A75;
  color: white;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.order-button:hover {
  background-color: #1D815B; /* 鼠标悬停时的背景颜色 */
  color: white;
}
.total-price{
  float: right;
}
.message-button {
    position: absolute;
    bottom: 30px;
    padding: 8px 100px;
    background-color: #3A9A75;
    color: white;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
.message-button:hover {
  background-color: #1D815B; /* 鼠标悬停时的背景颜色 */
  color: white;
}
.right-column {
  margin-left: 310px; /* 左边距应与左栏的宽度相同 */
  width: calc(100% - 310px); /* 减去左栏的宽度 */
  position: relative;
}
.right-column>span{
  display: flex;
  top: 100px;
  left: 20px;
  font-size: 24px;
  margin: 15px;
}
.menu-card {
  width: 200px; /* 设置卡片的宽度 */
  height: 100px; /* 设置卡片的高度 */
  margin-right: 10px; /* 设置卡片之间的间距 */
  margin-bottom: 10px; /* 设置卡片之间的间距 */
}
.image-container {
  display: flex;
  flex-wrap: wrap;
}
.image-container> img {
  width: 200px; /* 调整图片的宽度 */
  height: 200px; /* 调整图片的高度 */
  margin: 10px; /* 调整图片之间的间距 */
  padding-right: 10px;
  padding-left: 10px;
}
.user-evaluate-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.card-left img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.card-middle {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}
.card-left .user-name {
  flex: 1;
  font-size: 16px;
  font-weight: bold;
}
.card-left .publish-time {
  flex: 1;
  font-size: 14px;
  color: #999;
}
.card-middle .evaluate-content {
  font-size: 16px;
  color: #333;
}
.card-right img {
  width: 50px;
  height: 50px;
}
.number-select{
  margin-top: 10px;
  margin-bottom: 10px;
}
.t-price{
  font-size: 24px;
  color: #1D815B;
  font-weight: bold;
}
.card-top{
  display: flex;
}
.user-photo{
  width: 50px;
  height: 50px;
}
.user-name{
  font-weight: bold;
}
</style>

<script setup>
import {ref, getCurrentInstance, reactive, onMounted, nextTick, computed} from 'vue';
// import $route from "express/lib/router/layer";
// import router from "@/components/router";
// const menu = ref([{
//         dish_id: '',
//         dish_name: '',
//         price: '' ,
// },]);  //菜名和菜价

let cookerMainMessage = reactive({value:{}})

// let cookerInfo = reactive(null)
let cutId = ref(null);
const Info = () => {
  let path = `${proxy.serCtx}/userBase/message`
  proxy.$axios.get(path, {
        params:{
            id: cutId
        }
    }).then((res) => {
        cookerMainMessage.value=res.data
        cookerMainMessage.value.userVO.tags = cookerMainMessage.value.userVO.tags.split('|')
  })
}
import { useRoute } from 'vue-router'
import router from "@/components/router";
import {ElNotification} from "element-plus";

onMounted(() => {
    currentUser.id = JSON.parse(localStorage.getItem('id'))
    currentUser.name = JSON.parse(localStorage.getItem('name'))
    const route = useRoute()
    cutId = route.params.id   //将获取的id传递到后端进行匹配
    Info();
    nextTick(() => {
        // 执行其他操作或回调函数
    });
});

const { proxy } = getCurrentInstance()
// 计算总价

const totalPrice = computed(() => {
    const sum = cookerMainMessage.value.cookerDetailVO.foodsInfo.reduce((total, food) =>
        total + food.price * food.num, 0);
    return sum.toFixed(2);
});

let currentUser = reactive({
    name:'',
    id:0
})

let orderInfo = {
    id:'',
    user_id:'',
    tar_user_id:'',
    user_name:'',
    order_number:'',
    order_time:'',
    food_id:''
}
function generateRandomNumber(length) {
    let result = '';
    const characters = '0123456789'; // 可包含的字符集合

    for (let i = 0; i < length; i++) {
        const randomIndex = Math.floor(Math.random() * characters.length);
        result += characters[randomIndex];
    }

    return result;
}

const goToChatPage = () => {
  router.push({
    path: '/cookChat',
    query: {
      cookName: cookerMainMessage.value.userVO.userName
    }
  });
};

function doBuy() {

    // orderInfo.id = cookerMainMessage.value
    orderInfo.user_id = currentUser.id
    orderInfo.tar_user_id = cutId
    // orderInfo.user_name = currentUser.name
    orderInfo.order_number = generateRandomNumber(12)
    const currentDate = new Date(); // 获取当前日期和时间
    const year = currentDate.getFullYear(); // 获取年份
    const month = String(currentDate.getMonth() + 1).padStart(2, '0'); // 获取月份，注意要+1，补0
    const day = String(currentDate.getDate()).padStart(2, '0'); // 获取日期，补0
    const hour = String(currentDate.getHours()).padStart(2, '0'); // 获取小时，补0
    const minute = String(currentDate.getMinutes()).padStart(2, '0'); // 获取分钟，补0
    const second = String(currentDate.getSeconds()).padStart(2, '0'); // 获取秒数，补0

    const formattedDate = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    orderInfo.order_time = formattedDate
    let foodString = '';
    cookerMainMessage.value.cookerDetailVO.foodsInfo.forEach((food) => {
        if(food.num === 0) {
            return
        }
        foodString += `${food.foodId}:${food.num}|`;
    });
    // 移除最后一个分隔符
    foodString = foodString.slice(0, -1);
    orderInfo.food_id = foodString

    proxy.$axios.post(`${proxy.serCtx}/order/addOrder`, orderInfo).then((res) => {
        ElNotification({
            title: '下单成功',
            message: '订单已提交',
            type: 'success',
        });

        router.push(`/orderDetail/${res.data}`)
    })

}
</script>